<template>
  <view>
    <a-tree-select v-model:value="deptId" show-search style="width: 170px"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" allow-clear tree-default-expand-all :tree-data="treeData"
      :field-names="{ children: 'children', label: 'name', value: 'id' }" tree-node-filter-prop="name"
      @change="selectNode()">
    </a-tree-select>
  </view>
</template>
<script setup>
import { queryOne, queryTree } from '@/module/system/api/dept'
import emitter from '@/utils/mitt'
const emit = defineEmits(['search', 'confirm'])
const props = defineProps({
  deptId: {
    type: String
  }
})
const projectDept = ref();
const deptId = ref(undefined);
const treeData = ref([])
watch(() => props.deptId, (newValue) => {
  console.log('props.deptId', props.deptId);
  deptId.value = props.deptId
  // selectBuckle.value = newValue;
});

// 获取Tree
function buildDeptTree() {
  queryTree().then(res => {
    // console.log('buildTree', res)
    treeData.value = res[0].children
  })
  deptId.value = props.deptId
}
buildDeptTree();

function selectNode() {
  // console.log('deptId.value', deptId.value);
  if (deptId.value) {
    queryOne(deptId.value).then(resFir => {
      projectDept.value = resFir.deptName
      // console.log(resFir);
      emit('confirm', projectDept.value)
    })
  }
}

</script>